<template>
	<view class="extract-wrapper mg24">
		<view class="extract-money">
			<view class="curretn-money-number">
				<text class="fz24">可提现余额</text>
				<view class="money-number fz32">
					￥ {{goldBalance || 0}}
				</view>
				<text class="fz24">提现最低额度为100元</text>
			</view>
			<view class="extract-opration">
				<text class="fz28">提现金额</text>
				<view class="extract-input-wrapper flex-c-s">
					<view class="flex-c">
						<text class="fz48">￥</text>
						<input class="extract-input" v-model="balance" type="number" placeholder="输入提现金额" />
					</view>
					<text class="all-btn fz28 color-theme" @click="extractAll">全部</text>
				</view>
			</view>
		</view>
		<view class="extract-bank conteainer-public-style">
			<view class="fz26">选择银行卡</view>
			<view class="bank-wrapper">
				<view class="bank-item flex-c-s" v-for="(b, i) of bankCardList" :key="b.id" @click="selectorBank(i)">
					<view class="flex-c">
						<view class="bank-logo">
							<BankLogo :name="b.bank" />
						</view>
						<view class="card-name">
							<view class="fz30">{{b.bank}} [{{b.bankCardNumber.substring(b.bankCardNumber.length - 4)}}]</view>
							<text class="card-type fz24 color666">
								{{b.bankOfDeposit}}
							</text>
						</view>
					</view>
					<view class="">
						<image v-if="currentBank === i" src="/static/images/select.png" style="width: 40rpx; height: 40rpx;" mode=""></image>
					</view>
				</view>
			</view>
			
			<view class="flex-c-col"  v-if="!bankCardList.length">
				<NotData msg="暂无银行卡信息" />
				<button class=" public-large-btn mt30 fz26" style="width: 300rpx; height: 60rpx;line-height: 60rpx;" @click="addBank">+ 去添加银行卡</button>
			</view>
			<!-- <view class="bank-info">
				<view class="bank-info-item flex-c-s">
					<text class="bank-info-label">姓名</text>
					<input v-model="cardholder" class="bank-info-input" type="text" placeholder="持卡人姓名" />
				</view>
				<view class="bank-info-item flex-c-s">
					<text class="bank-info-label">银行</text>
					<input v-model="bank" class="bank-info-input" type="text" placeholder="银行名称" />
				</view>
				<view class="bank-info-item flex-c-s">
					<text class="bank-info-label">卡号</text>
					<input v-model="bankCardNumber" class="bank-info-input" type="number" placeholder="银行卡卡号" />
				</view>
				<view class="bank-info-item flex-c-s">
					<text class="bank-info-label">开户行</text>
					<input v-model="bankOfDeposit" class="bank-info-input" type="text" placeholder="银行卡开户行支行名称" />
				</view>
			</view> -->
			<!-- <view class="pay-list fz26">
				<radio-group @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd flex-c-s b-b-1">
						<view class="flex-c">
							<image class="play-icon"  src="/static/images/wx-pay.png" mode=""></image>
							<view>支付宝支付</view>
						</view>
						<radio value="wx" color="#F33C72" />
					</label>
					
					<label class="uni-list-cell uni-list-cell-pd flex-c-s b-b-1"> 
						<view class="flex-c">
							<image class="play-icon"  src="/static/images/zfb-pay.png" mode=""></image>
							<view>支付宝支付</view>
						</view>
						<radio value="zfb" color="#F33C72" />
					</label>
					
					<label class="uni-list-cell uni-list-cell-pd flex-c-s b-b-1">
						<view class="flex-c">
							<image class="play-icon"  src="/static/images/image59@2x.png" mode=""></image>
							<view>金豆支付</view>
						</view>
						<radio value="jd" color="#F33C72" />
					</label>
					<label class="uni-list-cell uni-list-cell-pd flex-c-s">
						<view class="flex-c">
							<image class="play-icon"  src="/static/images/yueb.png" mode=""></image>
							<view>余额支付</view>
						</view>
						<radio value="yue" color="#F33C72" />
					</label>
				</radio-group>
			</view> -->
			
		</view>
		<!-- <view class="withdrawal-record">
			<text class="color-theme fz26" @click="proviewRecord">查看提现记录</text>
		</view> -->
		<button class="extract-btn public-large-btn" @click="withdrawalHandle">提交申请</button>
	</view>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue'
import { onReady, onHide, onShow, onNavigationBarButtonTap } from '@dcloudio/uni-app' 

import { assetsInfo, WithdrawaApply, getAllBank } from '@/http/my' 

import Payment from '@/components/Payment.vue'
import BankLogo from '@/components/BankLogo.vue'
import NotData from '@/components/NoData.vue'

export interface IBank {
	id: number
	identity?: string
	cardholder: string,
	bank: string,
	bankCardNumber: string,
	bankOfDeposit: string
}

export default defineComponent({
	components: { Payment, BankLogo, NotData },
	setup() {
		const paymentLayer = ref()
		const state = reactive({
			currentBank: 0,
			balance: '',
			goldBalance: 0,
			bankOfDeposit: '',
			cardholder: '',
			bank: '',
			bankCardNumber: '',
			total: 0,
			page: 1,
			pageSize: 50,
			bankCardList: [] as Array<IBank>,
		})
		
		onReady(() => {
			queryBalance()
		})
		
		onShow(() => {
			getAllBankList()
		})
		
		onHide(() => {
			state.bankCardList = []
			state.page = 1
			initForm()
		})
		
		onNavigationBarButtonTap(() => {
			proviewRecord()
		})
		
		const queryBalance = async () => { // 查询资产
			let res = await assetsInfo()
			if(res.code === 0) {
				state.goldBalance = res.data.goldBalance || 0
			} 
		}
		
		const selectMony = (num: number) => {
			// state.rechargeMony = num
			// state.rechargeNum = state.recharge[num]
		}
		
		const initForm = () => {
			state.bank = ''
			state.bankOfDeposit = ''
			state.cardholder = ''
			state.bankCardNumber = ''
			state.balance = ''
		}
		
		const payHandle = () => {
			paymentLayer.value.openLayer()
		}
		
		const getAllBankList = async () => {
			let res = await getAllBank({
				page: state.page,
				pageSzie: state.pageSize
			}) 
			if(res.code === 0) {
				state.bankCardList = [...state.bankCardList,...(res.data?.list || [])]
				state.total = res.data?.total || 0 
			} 
		}
		
		const withdrawalHandle = async () => {
			if(!state.bankCardList.length) {
				uni.showToast({ title: '请先添加银行卡', icon: 'none' })
				return
			}
			if(state.goldBalance < 100) {
				uni.showToast({ title: '提现额度不能小于100', icon: 'none' })
				return
			}
			
			if(+state.balance > state.goldBalance) {
				uni.showToast({ title: '提现金额不能超过余额', icon: 'none' })
				return
			}
			if(!state.balance) {
				uni.showToast({ title: '输入提现金额', icon: 'none' })
				return
			}
			if(+state.balance < 100) {
				uni.showToast({ title: '提现额度不能小于100元', icon: 'none' })
				return
			}
			
			if(+state.balance > state.goldBalance) {
				uni.showToast({ title: '提现额度不能大于余额', icon: 'none' })
				return
			}
			// if(!state.cardholder) {
			// 	uni.showToast({ title: '输入持卡人姓名', icon: 'none' })
			// 	return
			// }
			// if(!state.bank) {
			// 	uni.showToast({ title: '输入银行名称', icon: 'none' })
			// 	return
			// }
			// if(!state.bankCardNumber) {
			// 	uni.showToast({ title: '输入银行卡号', icon: 'none' })
			// 	return
			// }
			// if(!state.bankOfDeposit) {
			// 	uni.showToast({ title: '输入开户行支行名称', icon: 'none' })
			// 	return
			// }
			let res = await WithdrawaApply({ 
				balance: Number.parseFloat(state.balance),
				bankInfoId: state.bankCardList[state.currentBank].id, 
			})
			
			if(res.code === 0) {
				uni.showToast({ title: '申请成功', icon: 'success' })
				initForm()
				queryBalance()
			} else {
				uni.showToast({ title: '提现申请失败', icon: 'error' })
			}
			console.log(res);
		}
		
		const proviewRecord = () => {
			uni.navigateTo({
				url: '/pages/myPackge/extract/withdrawalRecord'
			})
		}
		
		const extractAll = () => {
			if(state.goldBalance < 100) {
				uni.showToast({ title: '提现额度不能小于100', icon: 'none' })
				return
			}
			state.balance = String(state.goldBalance)
		}
		const selectorBank = (i: number) => {
			state.currentBank = i
		}
		
		const addBank = () => {
			uni.navigateTo({
				url: '/pages/myPackge/bankCard/addBankCard'
			})
		}
		return {
			paymentLayer,
			selectMony,
			payHandle,
			withdrawalHandle,
			proviewRecord,
			extractAll,
			selectorBank,
			addBank,
			...toRefs(state)
		}
	}
})
</script>

<style>
	page{ background: #f8f8fa; }
</style>
<style scoped lang="scss">
.extract-wrapper{
	.extract-money{
		background-image: url(/static/images/Group62@2x.png);
		background-repeat: no-repeat;
		background-size: 702rpx 430rpx;
		background-position: center;
		height: 430rpx; 
		.curretn-money-number{
			padding: 38rpx;
			margin-left: 36rpx;
			color: #fff;
			.money-number{
				font-weight: 700;
				margin: 12rpx 0 28rpx 0;
			}
		}
		.extract-opration{
			margin: 0 50rpx;
			.extract-input-wrapper{ 
				margin-top: 16rpx;
				height: 84rpx;
				background: #f8f8fa;
				border-radius: 8rpx;
				padding: 0 20rpx;
			}
			.extract-input{
				height: 32rpx;
				margin: 0 20rpx;
				flex: 1;
				font-size: 32rpx;
			}
			.all-btn{
				min-width: 60rpx;
			}
		}
	}	
	.extract-bank{
		.play-icon{
			width: 36rpx;
			height: 36rpx;
			margin-right: 20rpx;
		}
		.uni-list-cell{
			padding: 24rpx 0;
		}
		.bank-info{
			padding-top: 20rpx;
			.bank-info-item{
				padding: 24rpx 0;
				.bank-info-label{
					width: 180rpx;
					color: #666;
					font-size: 28rpx;
				}
				.bank-info-input{
					height: 32rpx;
					font-size: 28rpx;
					flex: 1;
					text-align: right;
				}
			}
		}
	}
	.withdrawal-record{
		padding: 24rpx 0;
		text-align: right;
	}
	.extract-btn{
		margin-top: 48rpx;
	}
	.bank-wrapper{
		.bank-item{
			padding: 14rpx 0;
			border-bottom: 1rpx solid #f0f0f0;
			&:last-child {
				padding-bottom: 0;
				border-bottom: none;
			}
		}
	}
}
</style>